<template lang="jade">
#borrow-current.current-lending
  //- .renew-bar.hide
    span 续借全部图书
    a.btn-renew.weui-btn.weui-btn_mini.weui-btn_plain-default(@click.stop='$emit("renewAll")') 一键续借
  .seperate
  .weui-loadmore(v-show="!ready")
    i.weui-loading
    span.weui-loadmore__tips 加载中
  div(v-show="ready")
    .weui-loadmore.weui-loadmore_line(v-show="isEmpty")
        .weui-loadmore__tips 暂无数据
    .current-list(v-if='bookList')
      .list-item(v-for="book in bookList")
        .weui-media-box.weui-media-box_appmsg
          .weui-media-box__hd.hidden
            img.weui-media-box__thumb(:src='book.COVER')
          .weui-media-box__bd
            h3.books-name {{book.TITLE}}
            .author 作者 {{book.AUTHOR}}
            a.btn-bluelight.weui-btn.weui-btn_mini.weui-btn_primary(@click.stop='renew(book.BKID)') 续借
        .bottom.weui-flex
          .giveback-date.weui-flex__item 应还书日期: {{book.RETURNDATE}}
          .status-normal {{ dateStatus(book.RETURNDATE) }}
</template>

<script>
import api from '../../api-new'
import { beforeToday } from '../../util/date'

// {{book.shouldReturn ? '(还未到期)' : '(逾期2天归还)'}}
export default {
  data () {
    return {
      ready: false,
      bookList: []
    }
  },
  computed: {
    isEmpty () {
      return !(this.bookList && this.bookList.length)
    }
  },
  created () {
    this.getList()
  },
  methods: {
    renew (bkid) {
      console.log('ddddd')
      const uid = this.$cookie.get('uid')
      api.renew(bkid, uid)
      .then(response => {
        window.alert('续借成功')
        // update new list
        this.getList()
      })
      .catch(error => {
        console.log(error)
        window.alert(error.message)
      })
      // emit renew event
      this.$emit('renew', bkid)
    },
    getList () {
      const uid = this.$cookie.get('uid')
      if (!uid) return
      api.borrowCurrent(uid).then(data => {
        this.bookList = data.data
      }).catch(error => {
        console.log(error)
      }).finally(() => {
        this.ready = true
      })
    },
    dateStatus (date) {
      return beforeToday(new Date(date)) ? '还未到期' : '已过期'
    }
  }
}
</script>

<style lang='scss'>
.renew-bar {
  font-size: 0.8rem;
  line-height: 2rem;
  height: 2rem;
  padding: 0 15px;
  position: relative;
  border-top: 1px solid #eee;
}
.btn-renew {
  background-color: #ff4d59;
}
</style>
